<%-- 
    Document   : bigpicture
    Created on : 2019-11-20, 22:04:57
    Author     : dusin
--%>
<%-- application.setAttribute("super",0);--%>   <%--大屏开始时加载所有数据 --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>大屏展示</title>
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery.easyui.min.js"></script>        
        <script language="JavaScript">
            var factoryCode = '<%=request.getParameter("factoryCode")%>';
            var companyCode = '<%=request.getParameter("companyCode")%>';
            var isStop = false;  //暂停轮播;
           var count=0;
           var queue=[];
           var currentTable;  //当前显示的表格 table1或者table2
           //填充内容 i第几个区域，d数据对象
           function fillContent(table,i,d){
               var idPrefix = '#'+table+'g'+i;
               if(d.frontPhoto!=null)
                    $(idPrefix+'1').attr("src","../../photo/"+d.frontPhoto)    //第一张图片
                if(d.sidePhoto!=null)
                    $(idPrefix+'2').attr("src","../../photo/"+d.sidePhoto)    //第二张图片
                if(d.licensePhoto!=null)
                    $(idPrefix+'3').attr("src","../../photo/"+d.licensePhoto)    //第二张图片
                if(d.paperPhoto!=null)
                    $(idPrefix+'4').attr("src","../../photo/"+d.paperPhoto)    //第二张图片
                if(d.factoryName!=null){
                    $('#'+table+'factoryName'+i).text("厂家："+d.factoryName);
                }else{
                    $('#'+table+'factoryName'+i).text("厂家：");
                }
                if(d.productName!=null){
                    $('#'+table+'productName'+i).text("货物："+d.productName);
                }else{
                    $('#'+table+'productName'+i).text("货物：");
                }
                if(d.plateNo!=null){
                    $('#'+table+'plateNo'+i).text("车牌："+d.plateNo);
                }else{
                    $('#'+table+'plateNo'+i).text("车牌：");
                }
                if(d.netWeight!=null){
                    $('#'+table+'netWeight'+i).text("净重："+d.netWeight+"吨");
                }else{
                    $('#'+table+'netWeight'+i).text("净重：");
                }
           }
           //将该单元格设置为null
           function fillNullContent(table,i){
                var idPrefix = '#'+table+'g'+i;               
                $(idPrefix+'1').attr("src","#")    //第一张图片               
                $(idPrefix+'2').removeAttr("src")    //第二张图
                $(idPrefix+'3').removeAttr("src")    //第二张图
                $(idPrefix+'4').removeAttr("src")    //第二张图片
                $('#'+table+'factoryName'+i).text("");
                $('#'+table+'productName'+i).text("");
                $('#'+table+'plateNo'+i).text("");
                $('#'+table+'netWeight'+i).text("");
           }
            function playQueue(){
                $('#table2').hide();
                $('#table1').show();
                var d = queue[count++];
                if(d!=null){
                    fillContent('table1',1,d);
                }else{
                    fillNullContent('table1',1);
                }
                d = queue[count++];
                if(d!=null){
                    fillContent('table1',2,d);
                }else{
                    fillNullContent('table1',2);
                }
                d = queue[count++];
                if(d!=null){
                    fillContent('table1',3,d);
                }else{
                    fillNullContent('table1',3);
                }
                d = queue[count++];
                if(d!=null){
                    fillContent('table1',4,d);
                }else{
                    fillNullContent('table1',4);
                }
                if(count>=16||count>=queue.length){
                    count=0;
                }
            }
            function updateData() {
                //alert($('#g11')) 
                if(isStop) return ; //暂停轮播
                $.post("../../servlet/web/cargo/Load4BigScreenWithRequestParams",{factoryCode:factoryCode,companyCode:companyCode},
                  function(data,status){
                    if(status=='success'){
                        if(data.total>0){
                            if(queue[0]!=null&&data.rows[0].recordNo==queue[0].recordNo)
                                return;
                            else{ //有新数据；显示新数据，并更新queue
                                $('#table1').hide();
                                $('#table2').show();
                                fillContent('table2',1,data.rows[0]);
                                count=0;                                
                            }
                            //不管有没有新数据，都更新队列，因为新数据会不完整
                            while(queue.length>0){   //队列不超过14个元素
                                queue.pop();
                            }
                            while(data.rows.length>0){
                                queue.unshift(data.rows.pop());  //对头插入 返回的数组的末尾元素
                            }
                            
                        }                        
                    }                    
                },"json");                
                playQueue();
            }

            //动态生成全屏表格，行数，列数 
            function genTableRow(table,rows, cols)
            {
                var idNo;  //ID的编号
                var width = $(document).width();
                var height = $(document).height();
                var gridWidth = width / cols;  //每个格子的宽度
                gridWidth = Math.ceil(gridWidth);
                var $row = $("<tr style='padding:0px;margin:0px'></tr>");
                for (var i = 1; i <=rows; i++)
                {
                    for (var j = 1; j <=cols; j++) {
                        if(i%3==0){  //文字行
                            var gridHeight = height *0.10/(rows/3);//文字格子的高度约1/9
                            
                            if(i==3&&(j==1||j==2)){
                                idNo = 1;   //第一块区域
                            }else if(i==3&&(j==3||j==4)){
                                idNo = 2;
                            }else if(i==6&&(j==1||j==2)){
                                idNo = 3;
                            }else{
                                idNo =4;
                            }
                            gridHeight = Math.floor(gridHeight);
                            var fontSize = gridHeight/2-10;
                            var $td = $("<td style='padding:0px;magin:0px'></td>");
                            var $div = $("<div style='padding:0px;magin:0px'></div>");
                            $div.css("width",gridWidth+"px");
                            $div.css("height",gridHeight+"px");
                            $div.css("padding","2px 0px 2px 30px");
                            $div.css("font-size",fontSize+"px");
                            $div.css("background-color","#EBF1DE");
                            var $factoryName;
                            var $productName;
                            var $plateNo;
                            var $netWeight
                            if(j==1||j==3){
                                $factoryName = $("<span id='"+table+"factoryName"+idNo+"'>厂家：</span>");
                                $productName = $("<span id='"+table+"productName"+idNo+"'>货物：</span>");
                                $div.append($factoryName).append("<br/>");                            
                                $div.append($productName).append("<br/>");
                            
                            }else{
                                $plateNo = $("<span id='"+table+"plateNo"+idNo+"'>车牌：</span>");                            
                                $netWeight = $("<span id='"+table+"netWeight"+idNo+"'>净重：</span>");                                
                                $div.append($plateNo).append("<br/>");                                
                                $div.append($netWeight).append("<br/>");
                           }
                            
                            $td.append($div);
                            $row.append($td);
                        }else{
                            var idCol; //id的列编号
                            if((i==1||i==2)&&(j==1||j==2)){
                                idNo = 1;   //第一块区域
                                if(i==1){
                                    idCol = j;
                                }else{
                                    idCol = i+j;
                                }
                            }else if((i==1||i==2)&&(j==3||j==4)){                                
                                idNo = 2;
                                if(i==1){
                                    idCol = j-2;
                                }else{
                                    idCol = j;
                                }
                            }else if((i==4||i==5)&&(j==1||j==2)){
                                idNo = 3;
                                if(i==4){
                                    idCol = j;
                                }else{
                                    idCol = j+2;
                                }
                            }else{
                                idNo =4;
                                if(i==4){
                                    idCol = j-2;
                                }else{
                                    idCol = j;
                                }
                            }
                            var gridHeight = height *0.40/(rows/3);//图片格子的高度约4/9
                            gridHeight = Math.floor(gridHeight);
                            $row.append($("<td><img id='"+table+"g" + idNo + idCol + "' style='width:" + gridWidth + "px;"
                                + "height:" + gridHeight + "px;padding:0px;magin:0px'" + "></img></td>"));
                        }
                    }
                    $("#"+table).append($row);
                    $row = $("<tr></tr>");
                }
                
            }
            $(document).ready(function() {
                $('#table2').hide();
                $('#table1').height($(document).height());
                genTableRow("table1",6, 4);                
                //$('#g11').attr("src","../../photo/证A-DLGT-20191117-101513-004.jpg");
                $('#table1').hide();
                genTableRow("table2",3,2);
                //$('#table2').show();
                //var imgsObj = $('#table1 img');//需要放大的图像
               var imgsObj = $('img');//需要放大的图像
                if(imgsObj){
                    $.each(imgsObj,function(){
                        $(this).click(function(){
                            var currImg = $(this);
                            if(typeof(currImg.attr('src'))=="undefined"||
                                    (!currImg.attr('src')&&currImg.attr('src')==null)||
                                    currImg.attr('src')=='#'){    //图片不存在
                                alert('图片不存在');
                                return;
                            }
                            //隐藏table
                            var imgId = currImg.attr('id');
                            if(imgId.indexOf("table1")!=-1){
                                currentTable = $('#table1');
                            }else{
                                currentTable = $('#table2');
                            }                          
                            currentTable.hide();
                            isStop=true;
                            coverLayer(1);
                            var tempContainer = $('<div class=tempContainer></div>');//图片容器
                            with(tempContainer){//width方法等同于$(this)
                                appendTo("body");
                                var windowWidth=$(document).width();
                                var windowHeight=$(document).height();
                                //获取图片原始宽度、高度
                                var orignImg = new Image();
                                orignImg.src =currImg.attr("src") ;
                                var currImgWidth= orignImg.width;
                                var currImgHeight = orignImg.height;
                                if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
                                    if(currImgHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgHeight)/2;
                                        if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('<img border=0 src=' + currImg.attr('src') + '>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
                                    }
                                }else{
                                    var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                                    if(currImgChangeHeight<windowHeight){
                                        var topHeight=(windowHeight-currImgChangeHeight)/2;
                                        if(topHeight>35){
                                            topHeight=topHeight-35;
                                            css('top',topHeight);
                                        }else{
                                            css('top',0);
                                        }
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
                                    }else{
                                        css('top',0);
                                        html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
                                    }
                                }
                            }
                            tempContainer.click(function(){                                
                                $(this).remove();
                                coverLayer(0);
                                isStop=false;  
                                currentTable.show();                             
                            });
                        });
                    });
                }
                else{
                    return false;
                }
                //使用禁用蒙层效果
                function coverLayer(tag){
                    with($('.over')){
                        if(tag==1){
                            css('height',$(document).height());
                            css('display','block');
                            css('opacity',1);
                            css("background-color","#FFFFFF");
                            css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
                        }
                        else{
                            css('display','none');
                        }
                    }
                }
                
                updateData();
                var timer = setInterval(updateData, 15000);
            });
        </script>
    </head>
    <body style="width:100%;height:100%;background: grey">        
        <table id="table1" border="1"  cellspacing="0" cellpadding="0" style="width:100%;height:100%;padding: 0px;margin: 0px;border-collapse: collapse">
        </table>
        <table id="table2" border="1" style="width:100%;height:100%">            
        </table>
    </body>
</html>
